<template>
    <div class="user-card">
        <div class="user-card-inner">
            <div class="user-card-top">
                <div class="user-card-top-cover"></div>
                <div class="user-card-top-content">
                    <div class="user-card-top-avg"></div>
                    <div class="user-card-top-name">
                        <span class="name">{{ userInfo.userName || '占无姓名' }}</span>
                        <span class="school">{{ userInfo.school || '占无学校' }}</span>
                    </div>
                </div>
            </div>
            <div class="user-card-middle" id="middle_content">
                <div class="user-card-middle-wrapper">
                    <div class="user-card-mid-base" v-if="tabbar[0].actived">
                        <div class="user-card-mid-base-item">
                            <div class="icon">
                                <img :src="AddressIcon" />
                            </div>
                            <div class="text">{{ userInfo.baseInfo?.address || '暂无信息' }}</div>
                        </div>
                        <div class="user-card-mid-base-item">
                            <div class="icon">
                                <img :src="TelIcon" />
                            </div>
                            <div class="text">{{ userInfo.baseInfo?.tel || '暂无信息' }}</div>
                        </div>
                        <div class="user-card-mid-base-item">
                            <div class="icon">
                                <img :src="EmailIcon" />
                            </div>
                            <div class="text">{{ userInfo.baseInfo?.email || '暂无信息' }}</div>
                        </div>
                        <div class="user-card-mid-base-item">
                            <div class="icon">
                                <img :src="BirthdayIcon" />
                            </div>
                            <div class="text">
                                {{ formatBirthday(userInfo.baseInfo.birthday) }}
                            </div>
                        </div>
                    </div>
                    <div class="user-card-mid-study" v-else-if="tabbar[1].actived">
                        <Step>
                            <step-item :extends="item.year" :sub-title="item.desc"
                                v-for="(item, index) in userInfo.education" :key="`step-item-${index}`">
                                {{ item.schoolName }}
                            </step-item>
                        </Step>
                    </div>
                    <div class="user-card-mid-intro" v-else>
                        <div class="intro-content">
                            <strong> 个人介绍:</strong> <br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是来自三年级二班的李明，我是一个活泼又聪明的男孩。我最喜欢的科目是数学，
                            因为解决问题的过程让我觉得很有成就感。在课余时间，我喜欢阅读科学类书籍，
                            它让我开阔了视野，也激发了我的求知欲。我还有一个温馨的小书架，上面摆满了我的精神食粮。
                            希望在这里能与大家分享更多的乐趣。
                        </div>
                    </div>
                </div>
            </div>
            <div class="user-card-down">
                <div :class="{ active: index === activeIndex }" class="user-card-down-item"
                    @click="checkoutTabber(index)" :key="`tabbar_item_${index}`" v-for="(tab, index) in tabbar">
                    {{ tab.title }}
                </div>
                <div class="user-card-line" :style="{ left: leftPos }"></div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import "./index.less";
</style>

<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import { useElementTransition } from "@/core/Hooks";
import { IUserInfo } from "@/types";
import { Step, StepItem } from "../Step";
import AddressIcon from "../../images/address.svg";
import TelIcon from "../../images/tel.svg";
import EmailIcon from "../../images/email.svg";
import BirthdayIcon from "../../images/birthday.svg";

defineOptions({
    name: "UserCard",
});

const props = withDefaults(defineProps<{
    info: Omit<IUserInfo, "education">
}>(), {})

onMounted(() => {
    useElementTransition("#middle_content", 300, "height");
});

const tabbar = ref([
    { title: "个人主页", actived: true },
    { title: "教育经历", actived: false },
    { title: "个人介绍", actived: false },
]);

const activeIndex = computed(() =>
    tabbar.value.findIndex((item) => item.actived)
);

const leftPos = computed<string>(() => {
    const index = activeIndex.value;
    return `${index * 33.3}%`;
});

const user = ref<IUserInfo>({
    userName: "杨昌昊",
    school: "贵州水利水电职业技术学院",
    baseInfo: {
        address: "贵州省贵阳市清镇市职教城西区龙井路1号",
        tel: "15748965475",
        email: "157478524@qq.com",
        birthday: "2001-05-15 15:25:17",
    },
    education: [
        {
            year: "2022",
            schoolName: "贵州水利水电职业技术学院",
            desc: "就读于贵州水职院人工智能专业，主要掌握python,java和html5等技能",
        },
        {
            year: "2019",
            schoolName: "贵州某某某高中",
            desc: "担任班级物理课代表，连续3年获得省级三好学生",
        },
        {
            year: "2016",
            schoolName: "贵州某某初中",
            desc: "初中期间，获得全国奥林匹克金奖。",
        },
        {
            year: "2010",
            schoolName: "贵州某某某某小学",
            desc: "6年期间，连续荣获市三好学生",
        },
    ],
});


const userInfo = computed<IUserInfo>(() => ({
    ...props.info,
    education: user.value.education
}))

const formatBirthday = computed(() => {
    return (_birthday_: string): string => {
        const birthday = _birthday_.split(" ")[0];
        let [year, month, day] = birthday.split("-");
        month = Number.parseInt(month).toString();
        day = Number.parseInt(day).toString();
        if (!year || month === 'NaN' || day === 'NaN') return '暂无信息'
        return year + "年" + month + "月" + day + "日";
    };
});

const checkoutTabber = (index: number) => {
    tabbar.value = tabbar.value.map((item, i) => ({
        ...item,
        actived: index === i,
    }));
};
</script>
